<!--  -->
<template>
  <div class="view_bg_default">
    <!-- <van-nav-bar
      title="注册账户"
      class="view_navbar_default"
      left-text
      right-text
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />-->
    <NavBar :navTitle="navTitle" @onClickLeft="onClickLeft"></NavBar>

    <div class="register_box">
      <van-field
        class="register_field"
        left-icon="http://q5o9rl630.bkt.clouddn.com/register_uersname_icon.png"
        v-model="registerForm.nick_name"
        clearable
        placeholder="请填写真实姓名,不要填写企业名称"
      />

      <van-field
        class="register_field"
        type="tel"
        left-icon="http://q5o9rl630.bkt.clouddn.com/register_mobile_icon.png"
        v-model="registerForm.mobile"
        clearable
        maxlength="11"
        placeholder="请输入手机号"
      />

      <van-field
        class="register_field"
        type="digit"
        left-icon="http://q5o9rl630.bkt.clouddn.com/register_code_icon.png"
        v-model="registerForm.code"
        center
        clearable
        maxlength="6"
        placeholder="请输入短信验证码"
      >
        <van-button
          v-if="showCodeBtn"
          slot="button"
          color="#588135"
          size="small"
          type="primary"
          @click="get_code"
        >{{codeTxt}}</van-button>
        <van-button
          v-if="!showCodeBtn"
          slot="button"
          color="#588135"
          size="small"
          type="primary"
          :disabled="true"
        >{{second}}</van-button>
      </van-field>
      <van-field
        class="register_field"
        left-icon="http://q5o9rl630.bkt.clouddn.com/register_email_icon.png"
        v-model="registerForm.email"
        clearable
        placeholder="请输入电子邮箱"
      />
      <van-button
        class="register_btn"
        type="primary"
        :color="pageCfg.baseColor"
        @click="register_action"
        block
      >注册</van-button>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import NavBar from "@/components/vant-ui-default-navbar.vue";
import { mobileRule, emailRule } from "../../assets/pubilc.js";
import {
  apiRegisterHotel,
  apiRegisterReviewer,
  apiVerificationCode
} from "@/config/api";
export default {
  data() {
    return {
      navTitle: "用户注册",
      showCodeBtn: true,
      second: 60,
      codeTxt: "点击发送验证码",
      registerForm: {
        nick_name: "",
        mobile: "",
        code: "",
        email: ""
      }
    };
  },
  components: {
    NavBar
  },
  created() {
    console.log(this.pageCfg.redColor);
  },
  mounted() {},
  methods: {
    onClickLeft() {
      //17600522588 888888
      this.$router.go(-1);
    },
    onClickRight() {},
    timeDown() {
      let result = setInterval(() => {
        --this.second;
        if (this.second < 0) {
          clearInterval(result);
          this.second = 60;
          this.showCodeBtn = true;
          this.txt = "重新获取";
        }
      }, 1000);
    },
    get_code() {
      if (mobileRule(this.registerForm.mobile)) {
        Toast.fail("手机号格式不正确");
      } else {
        this.showCodeBtn = false;
        this.timeDown();
        let data = {};
        data.mobile = this.registerForm.mobile;
        apiVerificationCode(data)
          .then(res => {
            if (res.code == 100) {
              Toast.success("发送成功");
            }
          })
          .catch(err => {
            console.log(err);
          });
      }
    },
    register_action() {
      if (this.registerForm.nick_name === "") {
        Toast.fail("请输入真实姓名");
        return;
      }
      if (mobileRule(this.registerForm.mobile)) {
        Toast.fail("手机号格式不正确");
        return;
      }
      if (this.registerForm.code === "") {
        Toast.fail("请输入手机验证码");
        return;
      }
      if (emailRule(this.registerForm.email)) {
        Toast.fail("请输入正确的邮箱");
        return;
      }
      //this.registerForm.mobile = Number(this.registerForm.mobile);
      //let login_type = localStorage.getItem("login_type");

      //酒店角色注册
      if (this.$route.query.login_type === "hotel") {
        apiRegisterHotel(this.registerForm, {
          needHud: 1
        }).then(res => {
          localStorage.setItem("userInfo", res.data);
          console.log(res.data);
          this.register_ok();
        });
      }

      //专家角色注册
      if (this.$route.query.login_type === "reviewer") {
        apiRegisterReviewer(this.registerForm).then(res => {
          localStorage.setItem("userInfo", res.data);
          this.register_ok();
        });
      }
    },
    register_ok() {
      console.log("注册成功");
      Toast.success("注册成功");
      if (JSON.parse(localStorage.getItem("userInfo")).verified == 0) {
        // 未提交
        if (this.$route.query.login_type === "hotel") {
          this.$router.push("/hotel_register_index");
        }
        if (this.$route.query.login_type === "reviewer") {
          this.$router.push("/hotel_register_index");
        }
      }
    }
  }
};
</script>


<style scoped>
/* .view_navbar_default {
  width: 100%;
  height: 44px;
  background: #b0c870;
}
.view_bg_default >>> [class*="van-hairline"]::after {
  border: none;
}
.view_bg_default >>> .van-nav-bar .van-icon {
  color: #bcd38b;
} */
.register_box {
  margin: 20px;
  padding: 20px;
  height: 300px;
  background: #bcd38b;
  border-radius: 10px;
  position: relative;
  justify-content: center;
}
.register_field {
  background: none;
  border-bottom: solid 1px #a5be7e;
}
.register_field >>> .van-icon-clear {
  color: #121212;
}
.register_box >>> .van-cell:not(:last-child)::after {
  border-bottom: none;
}

.register_btn {
  margin-top: 25px;
  border-radius: 5px;
}
</style>